<template>
  <div style="position: relative;">
    <div class="finger">
      点击这里
      <img src="@/static/finger.svg" alt="">
    </div>
    <div class="fingerbtn" v-show="end1">
      点击这里
      <img src="@/static/finger.svg" alt="">
    </div>
    <img src="@/static/voice.png" alt="" class="voice" @click="playaudio">
    <audio ref="audioRef" @ended="cando" :src="mymp3"></audio>
    <div class="processdetail1">
      <img :src="img" alt="">
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, onMounted, defineEmits } from 'vue';
import { useAuthStore } from '../store/index';
const store = useAuthStore();
const end1 = ref(false);
const props = defineProps({
  img: {
    type: String,
    required: true
  },
  mymp3: {
    type: String,
    required: true
  }
});

const audioRef = ref();

const playaudio = () => {
  console.log(audioRef.value.src);
  if (audioRef.value) {
    audioRef.value.play().catch(error => {
      console.error('Error playing audio:', error);
    });
  }
};
const cando = () => {
  store.setplaynum(++store.playnum);

  console.log(store.playnum);
  end1.value = true
  emits('cando', 1);
}
const emits = defineEmits(['end', 'cando']);
const run = () => {
  setTimeout(() => {
    emits('end', 1);
  }, 1000);
};

onMounted(() => {
  end1.value = false
});
</script>

<style lang="scss" scoped>
.finger {
  display: flex;
  margin-top: -10rem;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: red;
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
transform: translate(-15rem, -8rem);
  
  img {
    transform: rotate(90deg);
  }
}

.fingerbtn {
  display: flex;
  position: absolute;
  right: -21rem;
  top: 10rem;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: red;
  font-weight: 900;

  img {
    transform: rotate(180deg);
  }
}

.voice {
  height: 8rem;
  width: 8rem;
  cursor: pointer;
}

.processdetail1 {
  margin-bottom: 20%;
  background-image: url("@/static/processdetail2.jpg");
  background-size: cover;
  height: 30.5rem;
  width: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 3rem;

  img {
    height: 90%;
    width: 90%;
  }
}
</style>